<script setup>
import axios from "axios";
import { reactive, ref, defineProps, defineEmits, watch } from "vue";
let viewDialogForm = reactive({
  id: "",
  name: "",
  state: "",
  upDate: "",
  builtDate: "",
});

let editDialogForm = reactive({
  id: "",
  name: "",
  state: "",
  upDate: "",
  builtDate: "",
});
// 对话框父传子数据
const props = defineProps({
  selctionRow: Object,
  visible: Number,
});
const emit = defineEmits(["handleCloseVisiable", "upData"]);
console.log("visi", props.visible);
console.log("sel", props.selctionRow);
// 控制显示对话框
const viewDialogFormVisible = ref(Boolean(props.visible));

// 点击关闭对话框
const closeViewDialogFormVisible = () => {
  viewDialogFormVisible.value = false;
  for (let k in viewDialogForm) {
    viewDialogForm[k] = "";
  }
  console.log("表单置空");
  emit("handleCloseVisiable");
};

// 点击提交表单
const ruleFormRef = ref();
// 表单校验规则
const rules = reactive({
  name: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
  ],
  state: [
    {
      required: true,
      message: '请输入任务状态',
      trigger: 'blur',
    },
  ],
})
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      switch (props.visible) {
        case 1:
          subEditForm();
          closeViewDialogFormVisible();
          break;
        case 2:
          subAddForm();
          closeViewDialogFormVisible();
          break;
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

//
const subEditForm = () => {
  console.log("提交表单");
  axios({
    url: "/editData",
    method: "post",
    data: {
      editForm: viewDialogForm,
    },
  }).then((res) => {
    emit("upData");
    console.log("编辑成功");
  });
};
//
const subAddForm = () => {
  console.log("提交表单");

  axios({
    url: "/addData",
    method: "post",
    data: {
      addForm: viewDialogForm,
    },
  }).then((res) => {
    emit("upData");
    console.log("编辑成功");
  });
};
// 表单校验

watch(
  () => props.visible,
  (newValue, oldValue) => {
    viewDialogFormVisible.value = Boolean(newValue);
    if (newValue === 1) {
      for (let key in viewDialogForm) {
        viewDialogForm[key] = props.selctionRow[key];
      }
    } else {
    }

    console.log("赋值成功1");
  }
);
</script>
<template>
  <div class="dialog-Wrap">
    <el-dialog
      v-model="viewDialogFormVisible"
      title="编辑"
      @close="closeViewDialogFormVisible"
    >
      <el-form
        :model="viewDialogForm"
        ref="ruleFormRef"
        :rules="rules"
        class="form-wrap"
      >
        <el-row>
          <el-form-item
            class="form-item"
            key="name"
            label="任务名称"
            prop="name"
            label-width="100px"
          >
            <el-input class="input" v-model="viewDialogForm.name"></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            key="state"
            label="任务状态"
            prop="state"
            label-width="100px"
          >
            <el-select
              v-model="viewDialogForm.state"
              placeholder="选择任务状态"
            >
              <el-option label="未完成" value="未完成" />
              <el-option label="已完成" value="已完成" />
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item"
            key="upDate"
            label="更新时间"
            prop="upDate"
            label-width="100px"
            disabled
          >
            <el-input class="input" v-model="viewDialogForm.upDate" disabled></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            key="builtDate"
            label="创建时间"
            prop="builtDate"
            label-width="100px"
            
          >
            <el-input
              class="input"
              v-model="viewDialogForm.builtDate"
              disabled
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="success" @click="onSubmit(ruleFormRef)"
            >确定</el-button
          >
          <el-button @click="closeViewDialogFormVisible">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
